<template>
    <div>
        <div v-if="isOpenSeven">
            <IllegalRaiseFunds></IllegalRaiseFunds>
        </div>
        <div class="box" v-if="isOpen">
            <!-- 左侧导航菜单栏-->
            <div class="leftMenu">
                <div class="leftTitle">{{params.menuName}}</div>
                <el-menu
                        class="el-menu-demo"
                        :default-active="active"
                        active-text-color="#4297e3">
                    <template v-for="(item, index) in childrenMenu">
                        <el-menu-item :index="item.id.toString()" :key="index"
                                      @click="getcontent(item.id,item.menuTitle)"
                                      style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                            {{ item.menuTitle }}
                        </el-menu-item>
                    </template>
                </el-menu>
            </div>
            <!-- 列表页-->
            <div class="rightInfo" v-if="isOpenOne">
                <div>
                    <el-row class="rightRow" v-for="(item, index) in currentPageData" :key="index">
                        <div @click="getDetailedInfo(item)">
                            <el-col class="leftLi" :span="2">
                                <el-row class="leftLiTopRow"> {{item.monthDayDate}}</el-row>
                                <hr width="50px" color="#4297e3">
                                <el-row class="leftLiBottomRow">{{item.hourMinTime}}</el-row>
                            </el-col>
                            <el-col :class="item.content ? 'rightLi' : 'otherRightLi'" :span="22">
                                <el-row class="rightLiTopRow"> {{item.title}}</el-row>
                                <el-row class="rightLiBottomRow">{{ item.content | removeHtmlTags }}</el-row>
                            </el-col>
                        </div>
                    </el-row>
                </div>
                <div style="text-align: center">
                    <el-pagination
                            v-show="total>0"
                            layout="prev, pager, next"
                            :total="total"
                            :current-page="pageNum1"
                            :page-size="pageSize1"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!-- 详细页面-->
            <div class="rightInfo" v-if="isOpenTwo">
                <h3 style="text-align: center">{{pronInfo.title}}</h3>
                <h5 style="text-align: right;color: #b1b0b0">发布时间： {{pronInfo.sendTime}}</h5>
                <hr color="#b1b0b0">
                <div style="text-align: center"
                     v-show="!(pronInfo.image == '') && !(pronInfo.image == null) && !(pronInfo.image == undefined)">
                    <img style="width: 70%;height: auto;margin: 5px" :src="pronInfo.image"/>
                </div>
                <div class="rightInfoContent" v-html="pronInfo.content"></div>
                <div class="rightInfoContent"
                     v-show="!(pronInfo.up2 == '') && !(pronInfo.up2 == null) && !(pronInfo.up2 == undefined)">
                    <div style="text-align: center">附件下载<a :href="pronInfo.up2" target="_blank">点击下载</a></div>
                </div>
            </div>
            <!-- 信贷产品信息-->
            <div class="rightInfo" v-if="isOpenTree">
                <div style="border-bottom:#cbcaca 1px dashed;margin-bottom: 20px">
                    <h2 style="text-align: center;margin-top: 0">大连市民营企业小微企业银行信贷产品信息查询平台</h2>
                </div>
                <div>
                    <!-- 查询-->
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
                             label-width="68px">
                        <el-form-item label="产品分类" prop="productTypeId">
                            <el-cascader
                                    v-model="valueProduct"
                                    :options="productTypeOptions"
                                    :props="{multiple: true, checkStrictly: true }"
                            ></el-cascader>
                        </el-form-item>
                        <!--                    <el-form-item label="贷款类别" prop="twoName">-->
                        <!--                        <el-select v-model="queryParams.twoType" placeholder="请选择贷款类别" clearable filterable-->
                        <!--                                   @visible-change="getProductCategory">-->
                        <!--                            <el-option v-for="item in loanCategoryList" :key="item.id"-->
                        <!--                                       :label="item.tdmc"-->
                        <!--                                       :value="item.id"/>-->
                        <!--                        </el-select>-->
                        <!--                    </el-form-item>-->

                        <el-form-item label="申请方式" prop="applyChannel">
                            <el-select v-model="queryParams.applyChannel" placeholder="请选择申请方式" clearable filterable
                                       @visible-change="getApplication">
                                <el-option v-for="item in applicationList" :key="item.dictValue" :label="item.dictLabel"
                                           :value="item.dictValue"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="银行名称" prop="institutionName" label-width="70px">
                            <el-input v-model="queryParams.institutionName" placeholder="请输银行名称" clearable
                                      @keyup.enter.native="handleQuery"/>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="checked">只显示特色信贷产品</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                            </el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" size="mini" plain style="margin-bottom: 10px"
                                       @click="handleCompare"
                                       :disabled="!(this.selectedRows.length == 2)">
                                进行对比
                            </el-button>
                        </el-col>
                        <el-tag
                                v-for="tag in selectedRows"
                                :key="tag.id"
                                closable
                                @close="handleClose(tag)"
                                size="medium"
                                style="margin-left:10px"
                                type="danger"
                        >
                            {{tag.productName}}
                        </el-tag>

                    </el-row>
                    <!-- 表格 -->
                    <el-table ref="multipleTable" v-loading="loadingCredit" :data="currentPageData"
                              @select="handleSelection" border style="width: 100% "
                              :header-cell-style="{ backgroundColor: '#4297e3', color: 'white' }">
                        <el-table-column type="selection" width="55" align="center"/>
                        <el-table-column label="产品名称" align="left" prop="productName" header-align="center"
                                         show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div @click="getProduct(scope.row)" style="color: blue">{{ scope.row.productName }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="所属银行" align="left" prop="institutionName" header-align="center"
                                         show-overflow-tooltip/>
                        <el-table-column label="产品分类" align="left" prop="parentName" header-align="center"
                                         show-overflow-tooltip/>
                        <!--   <el-table-column label="贷款类别" align="left" prop="twoName" header-align="center" show-overflow-tooltip/>-->
                        <el-table-column label="申请方式" align="left" prop="dictLabel" header-align="center"
                                         show-overflow-tooltip/>
                        <el-table-column label="贷款对象" align="left" prop="loanObject" header-align="center"
                                         show-overflow-tooltip/>
                    </el-table>
                    <div style="text-align: center">
                        <el-pagination
                                v-show="total>0"
                                :current-page="pageNum1"
                                :page-size="10"
                                :total="total"
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>

            </div>
            <!-- 信贷产品信息对比显示-->
            <div class="rightInfo" v-if="isOpenFour">
                <h3 style="text-align: center;margin-top: 0">产品对比</h3>
                <el-button type="primary" icon="el-icon-arrow-left" size="small" style="margin-bottom: 10px"
                           @click="returnPage()">返回列表
                </el-button>
                <el-row>
                    <el-table
                            border
                            style="width: 100% "
                            :data="getValues"
                            :show-header="false">
                        <el-table-column
                                v-for="(item, index) in getHeaders"
                                :key="index"
                                :prop="item">
                        </el-table-column>
                    </el-table>
                </el-row>


                <el-row>
                    <h2 style="text-align: center;margin-top: 0;color:#ff0000;" @click="transferApplication">
                        点击在线提交申请</h2>
                </el-row>
            </div>
            <!-- 显示产品详细页面-->
            <div class="rightInfo" v-if="isOpenFive">
                <h3 style="text-align: center;margin-top: 0">{{productDetails.productName}}</h3>
                <el-button type="primary" icon="el-icon-arrow-left" size="small" style="margin-bottom: 5px"
                           @click="returnPage()">返回列表
                </el-button>
                <el-divider content-position="center">基本信息</el-divider>
                <el-row>
                    <el-descriptions :column="2" :size="size" border label-width="150px">
                        <el-descriptions-item label="贷款额度：" label-width="200px">{{productDetails.loanLimitText}}
                        </el-descriptions-item>
                        <el-descriptions-item label="所属银行：">{{productDetails.institutionName}}</el-descriptions-item>
                        <el-descriptions-item label="贷款利率：">{{productDetails.interestRateMin}}</el-descriptions-item>
                        <el-descriptions-item label="贷款期限：">{{productDetails.loanTermText}}</el-descriptions-item>
                        <el-descriptions-item label="担保方式：">{{productDetails.securityWay}}</el-descriptions-item>
                        <el-descriptions-item label="还款方式：">{{productDetails.repaymentWay}}</el-descriptions-item>
                        <!--  <el-descriptions-item label="贷款类型：">{{productDetails.twoName}}</el-descriptions-item>-->
                        <el-descriptions-item label="申请方式：">{{productDetails.dictLabel}}</el-descriptions-item>
                        <el-descriptions-item label="产品分类：">{{productDetails.parentName}}</el-descriptions-item>
                        <el-descriptions-item :span="2" label="贷款对象：">{{productDetails.loanObject}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" label="产品特点：">{{productDetails.productFeature}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" label="贷款条件：">{{productDetails.loanCondition}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" label="申请渠道：">{{productDetails.channelType}}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-row>
                <el-row>
                    <h2 style="text-align: center;margin-top:5px;color:#ff0000;" @click="transferApplication">
                        点击在线提交申请</h2>
                </el-row>
            </div>
            <!-- 金融产品价格公示-->
            <div class="rightInfo" v-if="isOpenSix">
                <div class="listBox">
                    <div class="boxPiece" v-for="item in bankInstitutionList" :key="item.dictValue">
                        <p>{{item.dictLabel}}</p>
                        <ul>
                            <li v-for="item1 in item.bankInstitutions" :key="item1.id"
                                style="border-bottom: 1px #565656 dashed">
                                <a class="bankLink" :href="item1.bankWebsite" target="_blank">
                                    {{item1.bankName}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import IllegalRaiseFunds from '@/components/IllegalRaiseFunds.vue';
    import {
        selectNewInfo, selectOneNewsInfo, creditProducts, selectDict, selectProductTypeTree, selectBankTypeInstitution
    } from '@/api/api'

    export default {
        components: {IllegalRaiseFunds},
        props: ['params'],
        data() {
            return {
                message: 'Hello, world!',
                // 侧面菜单导航栏显示内容
                active: this.params.menuId.toString(),
                // 传递二级菜单值
                childrenMenu: this.params.menuList,
                // 接收主页面传递参数
                childContent: this.params.contentList,
                // 总条数
                total: 0,
                pageSize1: 10,
                pageNum1: 1,
                typeId: null,
                // 是否显示列表页
                isOpenOne: false,
                // 详细页
                isOpenTwo: false,
                //是否显示信贷产品
                isOpenTree: false,
                // 对比页面
                isOpenFour: false,
                // 产品详细页面
                isOpenFive: false,
                // 金融产品价格公示
                isOpenSix: false,
                // 打击非法集资
                isOpenSeven: false,
                isOpen: true,
                // 特色
                checked: false,
                // 详细页数据
                pronInfo: [],
                //信贷产品数据加载
                loadingCredit: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 最大选择数量
                maxSelection: 2,
                //参数
                queryParams: {
                    ids: null,
                    institutionName: null,
                    applyChannel: null,
                    parentPath: null,
                    productTypeId: null,
                    featured: null,
                },
                //表单
                form: {},
                tableData: [],
                headers: [
                    {
                        prop: 'productName',
                        label: '产品名称:',
                    },
                    {
                        prop: 'institutionName',
                        label: '所属银行:',
                    },
                    {
                        prop: 'loanObject',
                        label: '贷款对象:',
                    },
                    {
                        prop: 'loanLimitText',
                        label: '贷款额度:',
                    },
                    {
                        prop: 'interestRateMin',
                        label: '贷款利率:',
                    },
                    {
                        prop: 'loanTermText',
                        label: '贷款期限:',
                    },
                    {
                        prop: 'securityWay',
                        label: '担保方式:',
                    },
                    {
                        prop: 'repaymentWay',
                        label: '还款方式:',
                    },
                    {
                        prop: 'productFeature',
                        label: '产品特点:',
                    },
                    {
                        prop: 'loanCondition',
                        label: '贷款条件:',
                    },
                    {
                        prop: 'channelType:',
                        label: '申请渠道',
                    }
                ],
                // 产品详细信息
                productDetails: [],
                // 信贷产品
                creditProducts: [],
                // 申请方式
                applicationList: [],
                // 跨页数据
                selectedRows: [],
                currentPageList: [],
                productTypeOptions: [],
                size: '',
                valueProduct: null,
                bankInstitutionList: [],

            };
        },
        computed: {
            // 计算当前页的数据
            currentPageData() {
                const start = (this.pageNum1 - 1) * this.pageSize1;
                const end = start + this.pageSize1;
                return this.childContent.slice(start, end);
            },
            getHeaders() {
                return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])

            },
            getValues() {
                return this.headers.map(item => {
                    return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
                });
            }
        },
        watch: {
            tableData: {
                handler() {
                    this.$nextTick(() => {
                        this.getHeaders;
                        this.getValues;
                    });
                },
                deep: true,
            },
            checked(newVal) {
                this.total = 0
                if (newVal) {
                    this.getFeatured();
                } else {
                    this.clearParam()
                    this.getCreditProduct();
                }
            }
        },
        created() {
            this.getParameter()
            this.getProductType()
        },
        filters: {
            removeHtmlTags(html) {
                var reg = /<[^>]+>/g; // 匹配 HTML 标签的正则表达式
                return html.replace(reg, '').replace(/&nbsp;/g, ''); // 将 HTML 标签和 &nbsp; 替换为空字符串
            },
        },
        methods: {
            // 清空参数
            clearParam() {
                this.queryParams.institutionName = null;
                this.queryParams.applyChannel = null;
                this.queryParams.parentPath = null;
                this.valueProduct = null;
                this.queryParams.ids = null;
                this.queryParams.featured = null;
            },
            // 是否打开
            openSwitch() {
                this.isOpenOne = false
                this.isOpenTree = false
                this.isOpenTwo = false
                this.isOpenFour = false
                this.isOpenFive = false
                this.isOpenSix = false
                this.isOpenSeven = false
            },
            // 查询产品分类
            getProductType() {
                selectProductTypeTree().then(res => {
                    this.productTypeOptions = res.data
                })
            },
            // 获取点击子菜单内容
            getcontent(i, v) {
                console.log("这里");
                console.log(i, v);
                this.childContent = [];
                this.openSwitch()
                this.total = 0;
                let mark = null
                if (i == 20) {
                    this.typeId = 4
                    mark = 1
                } else if (i == 49) {
                    this.typeId = 27
                    mark = 1
                } else if (i == 16686) {
                    this.typeId = 44
                    mark = 1
                } else if (i == 22) {
                    this.typeId = 8
                    mark = 1
                } else if (i == 16682) {
                    this.typeId = 41
                    mark = 1
                } else if (i == 16685) {
                    this.typeId = 42
                    mark = 1
                } else if (i == 23) {
                    this.typeId = 12
                    mark = 1
                } else if (i == 24) {
                    this.typeId = 13
                    mark = 1
                } else if (i == 29) {
                    this.typeId = 24
                    mark = 1
                } else if (i == 30) {
                    this.typeId = 25
                    mark = 1
                } else if (i == 31) {
                    this.typeId = 26
                    mark = 1
                } else if (i == 40) {
                    this.typeId = 22
                    mark = 1
                } else if (i == 46) {
                    this.typeId = 35
                    mark = 1
                } else if (i == 47) {
                    this.typeId = 36
                    mark = 1
                } else if (i == 13687) {
                    this.typeId = 38
                    mark = 1
                } else if (i == 16669) {
                    this.typeId = 39
                    mark = 1
                } else if (i == 7) {
                    this.typeId = 1
                    mark = 0
                } else if (i == 18) {
                    this.typeId = 5
                    mark = 0
                } else if (i == 19) {
                    this.typeId = 6
                    mark = 0
                } else if (i == 16679) {
                    this.typeId = 7
                    mark = 0
                } else if (i == 16683) {
                    this.typeId = 8
                    mark = 0
                } else if (i == 16684) {
                    this.typeId = 9
                    mark = 0
                } else if (i == 37) {
                    mark = 2
                } else if (i == 34) {
                    window.location.href = "http://www.dba.org.cn/YinTuanList.aspx"
                } else if (i == 50) {
                    // 金融产品价格公式
                    this.getbankInstitution()
                    this.isOpenSix = true
                } else if (i == 41) {
                    // 打击非法集资
                    this.isOpenSeven = true
                    this.isOpen = false
                }
                if (mark == 1) {
                    this.openSwitch()
                    this.isOpenOne = true
                    selectNewInfo({
                        typeId: this.typeId
                    }).then(response => {
                        this.childContent = response.data
                        this.getPageLength();
                    })
                } else if (mark == 0) {
                    this.openSwitch()
                    this.isOpenTwo = true
                    selectOneNewsInfo({
                        id: this.typeId
                    }).then(response => {
                        this.pronInfo = response.data[0]
                        if (this.pronInfo.image != null && this.pronInfo.image != '') {
                            this.pronInfo.image = 'http://www.dba.org.cn' + this.pronInfo.image.replace('~', '')
                        }
                        this.getPageLength();
                    })
                } else if (mark == 2) {
                    this.getCreditProduct();
                }
            },
            // 点击产品名称进入详细页面
            getProduct(e) {
                this.productDetails = e
                this.openSwitch()
                this.isOpenFive = true
            },
            // 返回上一页
            returnPage() {
                this.isOpenTree = true
                this.isOpenFour = false
                this.isOpenFive = false
                this.selectedRows = []
            },
            // 判断接受参数
            getParameter() {
                this.openSwitch()
                if (this.params.flag == 'one') {
                    if (this.params.data != null) {
                        this.getDetailedInfo(this.params.data)
                    } else {
                        this.getPageLength()
                        this.isOpenOne = true
                    }
                } else if (this.params.flag == 'two') {
                    this.isOpenTwo = true
                    this.pronInfo = this.params.contentList[0]
                    if (this.pronInfo.image != null && this.pronInfo.image != '') {
                        this.pronInfo.image = 'http://www.dba.org.cn' + this.pronInfo.image.replace('~', '')
                    }
                } else if (this.params.flag == 'three') {
                    this.getCreditProduct();
                    this.isOpenTree = true
                } else if (this.params.flag == 'four') {
                    this.getbankInstitution();
                    this.isOpenSix = true
                } else if (this.params.flag == 'five') {
                    this.isOpenSeven = true
                    this.isOpen = false
                }
            },
            // 进行对比
            handleCompare() {
                this.queryParams.ids = this.ids.join(',')
                if (this.ids.length == 2) {
                    this.openSwitch()
                    this.isOpenFour = true
                    creditProducts(this.queryParams).then(response => {
                        this.tableData = response.data
                    })
                } else {
                    this.$message.error(`最多只能选择 ${this.maxSelection} 个选项`);
                }
            },
            // 选框选中信贷产品对比信息数据
            handleSelection(selection, row) {
                if (selection.length > 0) {
                    this.selectedRows = selection
                } else {
                    this.selectedRows.forEach(item => {
                        if (item.id == row.id) {
                            this.selectedRows.splice(this.selectedRows.findIndex(item1 => item1.id === row.id), 1);
                        }
                    })
                }
                if (selection.length > this.maxSelection) {
                    this.$message.error(`最多只能选择 ${this.maxSelection} 个选项`);
                } else {
                    this.ids = selection.map(item => item.id);
                }
            },
            // 处理分页组件的页码变化事件
            handleCurrentChange(pageNum1) {
                this.pageNum1 = pageNum1;
                // 获取当前页数据
                this.currentPageList = this.childContent.slice(
                    (pageNum1 - 1) * this.pageSize1,
                    pageNum1 * this.pageSize1
                )
                // 下一页渲染完成后，将前一页选中的行重新勾选
                this.$nextTick(() => {
                    this.selectedRows.forEach(item => {
                        this.$refs.multipleTable.toggleRowSelection(item, true)
                    })
                })
            },
            // 删除标签
            handleClose(tag) {
                this.selectedRows.splice(this.selectedRows.indexOf(tag), 1);
                this.$refs.multipleTable.toggleRowSelection(tag, false)
            },
            // 获取信贷产品信息
            getCreditProduct() {
                this.loadingCredit = true;
                this.childContent = [];
                this.openSwitch()
                this.isOpenTree = true
                creditProducts(this.queryParams).then(response => {
                    this.childContent = response.data
                    this.getPageLength()
                    this.loadingCredit = false;
                })

            },
            // 申请方式下拉列表
            getApplication() {
                selectDict({code: "channel_type"}).then(response => {
                    this.applicationList = response.data
                })
            },
            // 贷款列别下来列表
            getProductCategory() {
                console.log("贷款列别下来列表")
            },
            // 特色产品列表
            getFeatured() {
                this.clearParam()
                this.queryParams.featured = "6-7-55,6-8-56"
                this.getCreditProduct();
            },
            // 表单搜索信贷产品信息
            handleQuery() {
                this.total = 0
                this.selectedRows = []
                this.pageNum1 = 1;
                if (this.valueProduct != null && this.valueProduct.length > 0) {
                    this.queryParams.parentPath = Object.values(this.valueProduct).sort().map(subArr => subArr.join('-')).join(',').toString();
                    this.queryParams.productTypeId = this.valueProduct[Object.keys(this.valueProduct)[Object.keys(this.valueProduct).length - 1]][this.valueProduct[Object.keys(this.valueProduct)[Object.keys(this.valueProduct).length - 1]].length - 1]
                } else {
                    this.queryParams.parentPath = null
                    this.queryParams.productTypeId = null
                }
                this.getCreditProduct();
            },
            // 重置
            resetQuery() {
                this.checked = false
                this.clearParam()
                this.handleQuery();
            },
            // 资料下载获取详细信息
            getDetailedInfo(v) {
                this.openSwitch()
                this.isOpenTwo = true
                if (v.image != null && v.image != '') {
                    v.image = 'http://www.dba.org.cn' + v.image.replace('~', '')
                } else if (v.up2 != null && v.up2 != '') {
                    v.up2 = 'http://www.dba.org.cn' + v.up2.replace('~', '')
                }
                this.pronInfo = v
            },
            // 获取分页长度
            getPageLength() {
                this.total = this.childContent.length
            },
            // 提交申请
            transferApplication() {
                window.location.href = "https://www.wjx.cn/vj/wKKqcvs.aspx"
            },
            // 获取银行机构
            getbankInstitution() {
                selectBankTypeInstitution().then(res => {
                    this.bankInstitutionList = res.data
                })
            },
        },
    };
</script>

<style scoped>
    ::v-deep .el-table__header-wrapper .el-checkbox {
        visibility: hidden;
    }

    .bankLink {
        color: black;
        text-decoration: none;
    }

    .bankLink:hover {
        color: blue;
    }

    .listBox {
        display: flex;
        flex-wrap: wrap;
    }

    .boxPiece {
        width: 50%;
        box-sizing: border-box;
        padding: 0 50px 0 10px;
    }

    .boxPiece P {
        font-weight: bold;
        font-size: 18px;
        border-bottom: 2px #00d0ff solid;
        height: 30px
    }

    .boxPiece ul {
        list-style-type: none;
        padding: 0;

    }

    .boxPiece ul li {
        padding-top: 10px;
        height: 25px;
        font-size: 14px;
    }

    /deep/ .el-descriptions-item__label.is-bordered-label {
        width: 180px;
    }

    /deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
        padding: 10px 20px;
    }

    /deep/ .el-divider__text {
        font-size: 19px;
        color: #7d7c7c;
        margin-top: -7px;
        padding: 0 25px 0 25px;
    }

    .box {
        display: flex;
        justify-content: center;
    }

    .leftTitle {
        background-color: #4297e3;
        border-right: solid 1px #e6e6e6;
        color: #fff;
        text-align: center;
        padding: 15px;
    }

    .leftMenu {
        width: 22%;
    }

    .el-menu-demo {
        background-color: #eff7f8;
        text-color: #000000;
        min-height: 700px;
        text-align: center;

    }

    /deep/ .el-menu-item:hover {
        background-color: #e3eaea;
        color: #4297e3;

    }

    .rightInfo {
        margin-left: 60px;
        width: 75%;
    }

    .rightRow {
        border-bottom: #eeeded 1px solid;
        margin-bottom: 10px;
    }

    .rightLi {
        margin-bottom: 10px;
        padding-left: 30px;
    }

    .otherRightLi {
        padding: 20px;
        margin: 0;
    }

    .rightLiTopRow {
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rightLiBottomRow {
        margin-bottom: 8px;
        padding-right: 20px;
        font-size: 13px;
        color: #b1b0b0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .leftLi {
        text-align: center;
        color: #4297e3;
    }

    .leftLiTopRow {
        font-size: 18px;
        font-weight: bold;
    }

    .leftLiBottomRow {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    /deep/ p {
        margin: 0;
    }

</style>
